import React, { Component } from 'react'
import { connect } from 'dva';

import { Table, Button, Drawer } from 'antd';

import Form from './DoneSearchForm';
import Details from './Details';
import Ellipsis from '@/components/Ellipsis';

import { ColumnProps } from 'antd/es/table';

interface IDetails {
  id: string;
  name: string;
  recordId: string;
  areaName: String;
  locationName: String;
  address: String;
  fireName: String;
  kindName: String;
  stateName: String;
  pushTime: String;
  handleName: String;
  modeName: String;
  mode: number;
  userName: String;
  createTime: String;
  floorName: String;
  buildName: String;
  installationAddr: String;
  images: Array<string>;
  disposeId: string;
}

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  list?: {
    data: Array<any>,
    dataCnt: number
  },
  details?: IDetails;
  historyDetails?: any;
  buttons?: Array<any>,
  dict?: object;
  cond?: any;
}

interface State {
  current: number;
  showInfo: boolean;
  showHistory: boolean;
  showHistoryInfo: boolean;
  deviceId: string;
}

@connect(({ device_alarm, loading, menu }) => ({
  list: device_alarm.doneList || {},
  dict: device_alarm.dict,
  details: device_alarm.details || {},
  historyDetails: device_alarm.historyDetails || {},
  cond: device_alarm.doneCond || {},
  buttons: menu.buttons,
  loading: loading.effects['device_alarm/queryDonePage']
}))
class Index extends Component<Props, State> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1,
    showInfo: false,
    showHistory: false,
    showHistoryInfo: false,
    deviceId: null,
  };

  private queryData(offset = 1) {
    const { dispatch } = this.props;
    dispatch({
      type: 'device_alarm/queryDonePage',
      payload: {
        pageNum: offset
      },
    });
  }

  private initCurrent() {
    this.setState({
      current: 1
    })
  }

  componentDidMount() {
    this.queryData();
  }

  private onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: `device_alarm/updateDoneCond`, payload: cond })
  }

  private handleDetails = (id) => {
    const { dispatch } = this.props;
    dispatch({ type: 'device_alarm/queryInfoById', payload: { disposeId: id } }).then(() => {
      this.setState({ showInfo: true })
    })
  }

  render() {
    const { buttons } = this.props;
    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }
    const { data = [], dataCnt } = this.props.list;

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      current: this.state.current,
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({ current }, () => this.queryData(current));
      },
    };
    const columns: ColumnProps<IDetails>[] = [{
      title: '序号',
      dataIndex: 'ind',
      width: '70px',
      render: (text) => <>{text < 10 ? `0${text}` : text}</>
    }, {
      title: '设备名称',
      dataIndex: 'name',
      width: '210px',
    }, {
      title: '安装地址',
      dataIndex: 'areaName',
      width: '145px',
      render: (text, record) => (
        <Ellipsis tooltip={true} lines={1}>
          {record.buildName || ''}{record.floorName || ''}{record.areaName || ''}{record.locationName || ''}{record.installationAddr || ''}
        </Ellipsis>
      )
    }, {
      title: '设备类型',
      dataIndex: 'kindName',
      width: '160px',
    }, {
      title: '通讯地址',
      dataIndex: 'networkAddr',
      width: '160px',
      render: (text) => (
        <Ellipsis tooltip={true} lines={1}>
          {text}
        </Ellipsis>
      )
    }, {
      title: '报警类型',
      dataIndex: 'disPoseStatusName',
      width: '160px',
      render: (text, record) => (<>{text || ''}-{record.stateName || ''}</>)
    }, {
      title: '报警时间',
      dataIndex: 'pushTime',
      width: '195px'
    }, {
      title: '处理方式',
      dataIndex: 'modeName',
      width: '109px'
    }, {
      title: '处理结果',
      dataIndex: 'resourceName',
      width: '120px'
    }, {
      title: '处理人',
      dataIndex: 'userName',
      width: '109px'
    }, {
      title: '处理时间',
      dataIndex: 'createTime',
      width: '195px',
      render: (text) => (
        <Ellipsis tooltip={true} lines={1}>
          {text}
        </Ellipsis>
      )
    }, {
      title: '操作', key: 'x', width: '60px',
      render: (text, record) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button style={{ padding: 0, textAlign: 'start' }} type="link" onClick={() => this.handleDetails(record.disposeId)}>详情</Button>
          </div>
        )
      }
    }];

    const res = Array.isArray(data) && data.map((v, ind) => ({
      ...v,
      ind: ind + 1
    }))

    return (
      <>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={res}
          rowKey="recordId"
          loading={this.props.loading}
          bordered
        />
        <Drawer
          title="报警详情"
          placement="right"
          closable={true}
          width={900}
          onClose={() => this.setState({ showInfo: false })}
          visible={this.state.showInfo}
          destroyOnClose={true}
        >
          <Details data={this.props.details} />
        </Drawer>
      </>
    );
  }
}

export default Index;
